<template>
<transition name="componentTab">
  <div class="myshop" v-if="myShop">
    <header class="header">
      <van-icon @click.stop="$router.go(-1)" class="icon" name="arrow-left" />
      <div class="header-title">购物车 ({{ myShop.length || 0 }})</div>
      <div class="header-edith" @click.stop="showDelete=!showDelete">{{!showDelete?"编辑":"完成"}}</div>
    </header>
    <section class="content">
      <ShopCardItem
        v-for="(item, index) in myShop"
        :key="index"
        :item="item"
        @itemChange="itemChange"
        :num="num"
        :showDelete="showDelete"
      />
    </section>
    <van-submit-bar
      button-color="var(--bgc-yellow)"
      :price="allPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="allChecked" @click="changeAllChecked"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</transition>
</template>

<script>
import ShopCardItem from "@/components/store/ShopCardItem.vue";
export default {
  components: {
    ShopCardItem,
  },
  data: () => {
    return {
      myShop: [],
      allChecked: false,
      num: 0,
      showDelete: false,
    };
  },
  computed: {
    allPrice() {
      let num = 0;
      this.myShop.map((item) => {
        if (item.isChecked) {
          num += item.goodValue * item.p;
        }
      });
      return num * 100;
    },
  },
  methods: {
    onSubmit() {
      this.$toast("在做了在做了");
    },
    itemChange() {
      this.myShop = JSON.parse(localStorage.getItem("myShop")) || [];
      let ch = this.myShop.every((item) => item.isChecked == true);
      this.allChecked = ch;
    },
    changeAllChecked() {
      this.myShop = JSON.parse(localStorage.getItem("myShop"));
      this.myShop = this.myShop.map((item) => {
        item.isChecked = this.allChecked;
        return item;
      });
      localStorage.setItem("myShop", JSON.stringify(this.myShop));
      this.num++;
    },
  },
  activated() {
    this.myShop = JSON.parse(localStorage.getItem("myShop")) || [];
  },
};
</script>

<style lang="scss" scoped>
.myshop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: var(--text-white);
  width: 100vw;
  height: 100vh;
  width: 100%;
  .header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    height: 0.5rem;
    font-size: 0.16rem;
    color: var(--text-black);
    display: flex;
    align-items: center;
    .icon {
      font-size: 0.25rem;
    }
    .header-title {
      font-size: 0.2rem;
      margin-left: 0.2rem;
    }
    .header-edith {
      color: var(--text-green);
      margin-right: 0;
      margin-left: auto;
    }
  }
}
</style>
<style lang="scss">
.myshop {
  .van-button {
    color: var(--text-black) !important;
  }
}
</style>